<template>
  <div class="ageSelect">
    年龄
    <span class="birthdaySelect" @click="openBrithDayPicker">
      {{birthdayDesc}}
      <i class="iconfont icon-arrow_down arrow-right"></i>
    </span>
    <span class="ageNumSelect" @click="showAgePicker">
      {{ageDesc}}
      <i class="iconfont icon-arrow_down arrow-right"></i>
    </span>
    <mt-datetime-picker
      ref="birthDayPicker"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleBrithdayConfirm"
      :startDate="new Date(startDate)"
      :endDate="new Date(endDate)"
      @visible-change="cancleBirthday"
      v-model="birthDayPickerValue">
    </mt-datetime-picker>
    <!--<div class="bottomPicker"></div>-->
    <!--<div :class="{'popup-slide-bottom-enter': pickerLeaveBottom}" class="mint-popup mint-popup-bottom" v-show="showPicker" style="width: 100%;z-index: 1000;">-->
      <!--<div class="picker-toolbar">-->
        <!--<span class="mint-datetime-action mint-datetime-cancel" @click="hideAgePicker">取消</span>-->
        <!--<span class="mint-datetime-action mint-datetime-confirm" @click="getPickerAge">确定</span>-->
      <!--</div>-->
      <!--<mt-picker :slots="slots" ref="agePicker" @change="agePickerChange"></mt-picker>-->
    <!--</div>-->
    <!--<div class="v-modal" style="z-index: 999;" v-show="showPicker" @click="hideAgePicker"></div>-->
    <mt-popup v-model="showPicker" position="bottom" :style="{width: '100%'}" :closeOnClickModal="false">
      <div class="picker-toolbar">
        <span class="mint-datetime-action mint-datetime-cancel" @click="hideAgePicker">取消</span>
        <span class="mint-datetime-action mint-datetime-confirm" @click="getPickerAge">确定</span>
      </div>
      <mt-picker :slots="slots" ref="agePicker" @change="agePickerChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
export default {
  name: 'ageSelect',
  data () {
    return {
      birthday: '生日(选填)',
      age: '',
      ageDesc: '',
      birthDayPickerValue: `${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()}`,
      birthdayDesc: '生日(选填)',
      // startDate: '1959/5/9',
      // endDate: new Date(),
      showPicker: false,
      pickerLeaveBottom: true,
      agePickerSlot: [],
      slots: []
    }
  },
  props: ['startDate', 'endDate', 'startAge', 'ageArray'],
  mounted () {
    this.setPickerDefault()
  },
  methods: {
    setPickerDefault () {
      let defaultIndex = 0
      for (let i = 0; i < this.ageArray.length; i++) {
        if (Number(this.ageArray[i]) === Number(this.startAge)) {
          defaultIndex = i
          break
        }
      }
      this.slots = [{
        flex: 1,
        values: this.ageArray,
        textAlign: 'center',
        defaultIndex: defaultIndex
      }]
      this.age = this.startAge
      this.ageDesc = this.startAge + '岁'
    },
    openBrithDayPicker () {
      this.$refs.birthDayPicker.open()
    },
    handleBrithdayConfirm (data) {
      this.age = this.getAge(data)
      this.ageDesc = `${this.age}岁`
      this.birthdayDesc = `${data.getFullYear()}/${data.getMonth() + 1}/${data.getDate()}`
      this.$emit('getAge', this.age)
      document.querySelector('body').style.position = ''
    },
    getAge (birthday) {
      let returnAge
      let birthYear = birthday.getFullYear()
      let birthMonth = birthday.getMonth() + 1
      let birthDay = birthday.getDate()
      let d = new Date()
      let nowYear = d.getFullYear()
      let nowMonth = d.getMonth() + 1
      let nowDay = d.getDate()
      if (nowYear === birthYear) {
        returnAge = 0
      } else {
        let ageDiff = nowYear - birthYear
        if (ageDiff > 0) {
          if (nowMonth === birthMonth) {
            let dayDiff = nowDay - birthDay
            if (dayDiff < 0) {
              returnAge = ageDiff - 1
            } else {
              returnAge = ageDiff
            }
          } else {
            let monthDiff = nowMonth - birthMonth
            if (monthDiff < 0) {
              returnAge = ageDiff - 1
            } else {
              returnAge = ageDiff
            }
          }
        } else {
          returnAge = -1
        }
      }
      return returnAge
    },
    showAgePicker () {
      this.showPicker = true
      setTimeout(() => {
        this.pickerLeaveBottom = false
      }, 100)
    },
    hideAgePicker () {
      // this.pickerLeaveBottom = true
      // setTimeout(() => {
      this.showPicker = false
      // }, 100)
    },
    agePickerChange (ref, data) {
      this.agePickerSlot = data
    },
    getPickerAge () {
      this.age = this.agePickerSlot[0]
      if (!this.age && this.age !== 0) {
        this.age = this.startAge
      }
      this.ageDesc = `${this.age}岁`
      this.pickerLeaveBottom = true
      this.birthdayDesc = '生日(选填)'
      setTimeout(() => {
        this.showPicker = false
      }, 100)
      this.$emit('getAge', this.age)
    },
    cancleBirthday (data) {
      if (data) {
        document.querySelector('body').style.position = 'fixed'
      } else {
        document.querySelector('body').style.position = ''
      }
    }
  },
  watch: {
    ageArray (val) {
      this.setPickerDefault()
    },
    showPicker (val) {
      if (val) {
        document.querySelector('body').style.position = 'fixed'
      } else {
        document.querySelector('body').style.position = ''
      }
    }
  }
}
</script>

<style scoped>
  .ageSelect {
    padding: 5px 15px;
    font-size: 14px;
    position: relative;
    color: #535353;
    line-height: 27px;
  }
  .birthdaySelect {
    width: 90px;
    height: 25px;
    border: 1px solid #c9c9c9;
    text-align: left;
    line-height: 27px;
    position: absolute;
    right: 125px;
    padding: 0 5px;
    font-size: 14px;
    border-radius: 3px;
  }
  .ageNumSelect {
    width: 90px;
    height: 25px;
    border: 1px solid #c9c9c9;
    text-align: left;
    line-height: 27px;
    position: absolute;
    right: 15px;
    padding: 0 5px;
    font-size: 14px;
    border-radius: 3px;
  }
  .arrow-right {
    float: right;
    line-height: 25px;
    color: #8a8a8a;
    font-size: 12px;
  }
</style>
